<template>
  <div class="app-container">
    <el-card style="margin-bottom:20px;">
      <div slot="header" class="clearfix">
        <span>{{$t('About Me')}}</span>
      </div>

      <div class="user-profile">
        <div class="box-center">
          <pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
            <div>{{$t('Holle')}}</div>
            {{ user.role }}
          </pan-thumb>
        </div>
        <div class="box-center">
          <div class="user-name text-center">{{ user.name }}</div>
          <div class="user-role text-center text-muted">{{ user.role  }}</div>
        </div>
      </div>
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label="$t('Old_password')" prop="oldPassword">
          <el-input v-model="dataForm.oldPassword" type="password"/>
        </el-form-item>
        <el-form-item :label="$t('New_password')" prop="newPassword">
          <el-input v-model="dataForm.newPassword" type="password" auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="$t('Confirm_password')" prop="newPassword2">
          <el-input v-model="dataForm.newPassword2" type="password" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div style="margin-left:100px;">
        <!-- <el-button @click="cancel">{{$t('Cancel')}}</el-button> -->
        <el-button type="primary" @click="change">{{$t('Confirm')}}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { changePassword } from '@/api/profile'
import PanThumb from '@/components/PanThumb'
export default {
  name: 'ChangePassword',
  components: { PanThumb },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('Please_enter_password')))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('Please_re-enter_password')))
      } else if (value !== this.dataForm.newPassword) {
        callback(new Error(this.$t('Passwords_entered_do_not_match')))
      } else {
        callback()
      }
    }
    return {
      user:{
        avatar:'https://app.lumierecafe.com/mi/lumierecafe/dev/user234.png',
      },
      dataForm: {
        oldPassword: '',
        newPassword: '',
        newPassword2: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: this.$t('Old_password_cannot_be_empty'), trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: this.$t('New_password_cannot_be_empty'), trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPassword2: [
          { required: true, message: this.$t('Confirm_password_cannot_be_empty'), trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.dataForm = {
        oldPassword: '',
        newPassword: '',
        newPassword2: ''
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    change() {
      //debugger
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        changePassword(this.dataForm).then(response => {
          this.$notify.success({
            title: this.$t('Success!'),
            message: this.$t('Password_change_successful')
          })
        }).catch(response => {
          this.$notify.error({
            title: this.$t('Failed'),
            message: this.$t(response.data.errmsg)
          })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}
</style>
